<template>
    <div style="width: 100%; height: 100%;">
        <div>
            <div class=" app-container">
                <div class="pageTitle">
                    <div class="pageTitleSub">
                        <el-form ref="queryForm" :model="queryParams" label-width="120px" size="small">
                            <el-row :gutter="5">
                                <el-col :span="6">
                                    <el-form-item label="车牌号" prop="plateNo">
                                        <el-input v-model="queryParams.plateNo" placeholder="请输入车牌号" clearable/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="入场开始时间" prop="startGmtEntry">
                                        <el-date-picker
                                            v-model="queryParams.startGmtEntry"
                                            format="yyyy-MM-dd HH:mm:ss"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            type="datetime"
                                            placeholder="选择日期时间"/>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="结束时间" prop="endGmtEntry">
                                        <el-date-picker
                                            v-model="queryParams.endGmtEntry"
                                            format="yyyy-MM-dd HH:mm:ss"
                                            value-format="yyyy-MM-dd HH:mm:ss"
                                            type="datetime"
                                            placeholder="选择日期时间"/>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </div>
                    <div class="pageBtn">
                        <el-button size="small" type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                    </div>
                </div>

                <page-main>
                    <el-table v-if="showtable1" ref="orderTable" v-loading="isLoading" class="actionTable" stripe
                              :data="tableData"
                              header-cell-class-name="table-header" style="width: 100%;">
                        <el-table-column label="车牌号" width="150" prop="plateNo"/>
                        <el-table-column label="入场时间" width="200" prop="gmtEntry">
                            <template slot-scope="scope">
                                {{ moment(scope.row.gmtEntry).format('YYYY-MM-DD HH:mm:ss') }}
                            </template>
                        </el-table-column>
                        <el-table-column label="车辆品牌" width="150" prop="vehicleBrand">
                        </el-table-column>
                        <el-table-column label="子品牌" width="150" prop="subBrand"/>
                        <el-table-column label="车辆类型" width="150" prop="vehicleTypeName">
                        </el-table-column>
                        <el-table-column label="操作" width="450" align="center">
                            <template slot-scope="scope">
                                <el-button size="small" type="text" icon="el-icon-document"
                                           @click="editVehicleType(scope.$index)">
                                    车辆类型修改
                                </el-button>
                                <el-button size="small" type="text" icon="el-icon-document"
                                           @click="handlePic(scope.$index)">
                                    查看图片
                                </el-button>
                                <el-button size="small" type="text" icon="el-icon-document"
                                           @click="handleRegisterView(scope.$index)">
                                    车辆登记
                                </el-button>
                                <el-button size="small" type="text" icon="el-icon-connection"
                                           @click="handleAssociationTransfer(scope.$index)">
                                    关联转运车辆
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="Pagination">
                        <el-pagination
                            background
                            layout="total, sizes,prev, pager, next,jumper"
                            :current-page.sync="queryParams.CurrentPage"
                            :page-size="20"
                            :page-sizes="[20]"
                            :total="totalCount"
                            @current-change="handleCurrentChange"/>
                    </div>
                </page-main>
            </div>
        </div>

        <el-dialog :title="this.Title" :visible.sync="entranceInformationVisible" width="1200px">
            <entranceInformation :information="information" :entranceDate="entranceData" :indexs="index"
                                 :total="totalCount"
                                 :current-page="queryParams.CurrentPage" :show="show" :table-size="tableSize"
                                 :visibleLine="visibleLine"
                                 @handleView="handleRegisterView" @getList="handleCurrentChange"
                                 @cancelEstablishingCase="entranceInformationVisible = false"/>

        </el-dialog>
        <el-dialog :title="this.plate_no" :visible.sync="showpic" :close-on-click-modal="false" width="400px"
                   append-to-body>
            <el-form ref="form" :rules="rules" label-width="120px" size="small">
                <!--                <el-col :span="8">-->
                <el-row>
                    <!--                        <el-col :span="5"><span style="float: right;">车辆类型：</span></el-col>-->
                    <el-col :span="14">
                        <el-select v-if="!show" v-model="form.vehicleType" placeholder="请选择"
                                   :disabled="show || personInfoUnable">
                            <el-option
                                v-for="item in typeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"/>
                        </el-select>
                    </el-col>
                    <div style=" text-align: right; right: 1px;">
                        <el-button size="small" type="primary" @click="edit1">修改</el-button>
                    </div>
                </el-row>
                <!--                </el-col>-->
            </el-form>
        </el-dialog>

        <el-dialog :title="this.plate_no" :visible.sync="AssociationVisible" :close-on-click-modal="false"
                   width="550px" append-to-body>
            <el-form ref="queryForm" :model="queryParams1" label-width="60px" size="small">
                <el-row :gutter="5">
                    <el-col :span="12">
                        <el-form-item label="车牌号" prop="plateNo">
                            <el-input v-model="queryParams1.plateNo" placeholder="请输入车牌号" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-button size="small" type="primary" style="float: right;" icon="el-icon-search"
                                   @click="handleQuery">查询
                        </el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-table
                ref="orderTable" v-loading="isLoading" class="actionTable" stripe :data="tableData1"
                header-cell-class-name="table-header" style="width: 100%;" border>
                <el-table-column label="车牌号" prop="plateNo" width="150"/>
                <el-table-column label="入场时间" prop="gmtEntry" width="180">
                    <!--                    <template slot-scope="scope">-->
                    <!--                        {{ moment(scope.row.detection_time).format('YYYY-MM-DD HH:mm:ss') }}-->
                    <!--                    </template>-->
                </el-table-column>
                <el-table-column label="操作" width="120" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" icon="el-icon-connection" @click="handleView(scope.row)">
                            关联
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="Pagination">
                <el-pagination
                    background
                    layout="total, sizes,prev, pager, next,jumper"
                    :current-page.sync="queryParams1.CurrentPage"
                    :page-size="20"
                    :page-sizes="[20]"
                    :total="totalCount1"
                    @current-change="handleCurrentChange1"/>
            </div>
        </el-dialog>

        <!--        <weight-information-->
        <!--            ref="weight-information"-->
        <!--            :total="totalSize"-->
        <!--            :table-size="tableSize"-->
        <!--            :current-page="queryParams.CurrentPage"-->
        <!--            :init-detail-data="detailData"-->
        <!--            :indexs="index"-->
        <!--            :wja="wja"-->
        <!--            :step="step1"-->
        <!--            :wja-type="wjaType"-->
        <!--            @handleViews="handleViews"-->
        <!--            @getList="handleCurrentChange" />-->
        <entrance-pic
            ref="entrance-pic"
            :total="totalSize"
            :table-size="tableSize"
            :current-page="queryParams.CurrentPage"
            :init-detail-data="picData"
            :init-detail-data1="detailData1"
            :indexs="index"
            :wja="wja"
            :step="step1"
            :wja-type="wjaType"
            @handleViews="handleViews"
            @getList="handleCurrentChange"/>
    </div>
</template>

<script>
    import moment from 'moment';
    import entranceInformation from '@/modules/information-query/entranceInformation';
    import WeightInformation from '@/modules/information-query/weightInformation';
    import {
        GetEntrance,
        AssociatedVehicle,
        GetArchiveEntrance,
        GetTransferEntrance,
        UpdateVehicleType
    } from '@/api/parkUnloadApi';
    import EntrancePic from '@/modules/information-query/entrancePic';

    export default {
        name: 'pre-entrance',
        components: {
            entranceInformation, WeightInformation, EntrancePic
        },
        props: {},
        data() {
            return {
                Title: '入场登记',
                cardate: {},
                plate_no: '',
                vehicleType: '',
                entranceId: '',
                dialogCaseInfoVisible: false,
                show: false,
                showtable1: true,
                index: 0,
                totalCount: 0,
                totalCount1: 0,
                tableSize: 0,
                crossing_arr: [],
                options1: [],
                information: [],
                crossing_name_arr: [],
                entranceInformationVisible: false,
                weightInformationVisible: false,
                detailVisible: false,
                AssociationVisible: false,
                showpic: false,
                step1: 'sh',
                queryParams: {
                    plateNo: '',
                    // lane_name: '',
                    // device_type: '',
                    // StatisGroupName: ''
                },
                queryParams1: {
                    plateNo: '',
                    CurrentPage: 1,
                    // lane_name: '',
                    // device_type: '',
                    // StatisGroupName: ''
                },

                RateOrNumType: 'Rate',

                isLoading: false,
                tableData: [],
                tableData1: [],
                tableDataLane: [],
                detailData: {
                    plateNo: '',
                },
                picData: {},
                options: [],
                value: '',
                entranceData: [],
                visibleLine: '',
                typeOptions:
                    [{
                        // id: '0',
                        value: '0',
                        label: '转运车辆'
                    }, {
                        // id: '1',
                        value: '1',
                        label: '超限车辆'
                    }],
                form: {
                    vehicleType: '',
                }
            };
        },
        computed: {},
        watch: {
            entranceInformationVisible(newValue, oldValue) {
                this.loadRemoteData()
            }
        },

        created() {

        },
        mounted() {
            this.loadRemoteData();
        },
        methods: {
            moment,
            edit1() {
                // debugger
                if (this.form.vehicleType == "超限车") {
                    this.form.vehicleType = 1
                } else if (this.form.vehicleType == "转运车") {
                    this.form.vehicleType = 0
                }
                let param = {
                    entranceId: this.entranceId,
                    vehicleType: this.form.vehicleType,
                };
                UpdateVehicleType(param).then(res => {
                    this.showpic = false;
                    // this.$emit('cancelEstablishingCase', false);
                    if (res.status == '0' || res.res.UpdateVehicleType == 'Success') {
                        this.$message({
                            message: '修改成功',
                            type: 'success',

                        });
                    }
                    this.loadRemoteData();
                }).catch(err => {
                    console.log(err);
                    this.showpic = false;
                });
            },
            editVehicleType(i) {
                // debugger;
                this.plate_no = this.tableData[i].plateNo;
                this.form.vehicleType = this.tableData[i].vehicleType;
                this.entranceId = this.tableData[i].entranceId;
                if (this.form.vehicleType == 1) {
                    this.form.vehicleType = "超限车"
                } else if (this.form.vehicleType == 0) {
                    this.form.vehicleType = "转运车"
                }
                this.showpic = true;
            },
            handleQuery() {
                this.loadRemoteData();
            },

            handleCurrentChange(val) {
                // debugger
                this.queryParams.CurrentPage = val;
                this.loadRemoteData();
            },
            handleCurrentChange1(val) {
                // debugger
                this.queryParams1.CurrentPage = val;
                this.loadRemoteData();
            },
            handlePic(i) {
                this.picData = this.tableData[i];
                this.$refs['entrance-pic'].show();
            },
            handleRegisterView(i) {
                this.index = i;
                console.log(i);
                let date = {
                    entranceId: this.tableData[i].entranceId,
                    vehicleType: this.tableData[i].vehicleType
                };
                // this.information = this.tableData[i];
                this.information = [];
                this.information = date;
                console.log(this.information);
                if (this.tableData[i].vehicleTypeName != "转运车") {
                    GetArchiveEntrance(date).then(res => {
                        // debugger
                        this.entranceData = res.res.GetArchiveEntrance;
                        if (this.entranceData[0].driverName != null) {
                            this.visibleLine = 'none';
                        } else {
                            this.visibleLine = '';
                        }
                        // this.entranceData.vehicleType =  this.entranceData.vehicleTypeName;
                        // this.entranceData.driverName = this.entranceData[0].driverName;
                        // if (this.entranceData.driverName != null){
                        //     // 判断是否登记过
                        //     this.status = true;
                        // } else{
                        //     this.status = false;
                        // }
                        // console.log(this.status);
                        // this.entranceData = res.res.GetArchiveEntrance;
                        this.entranceInformationVisible = true;
                    }).catch(err => {
                        console.log(err);
                    });
                }else {
                    this.$message({
                        message: '转运车不能登记',
                        type: 'warning'
                    });
                }

                console.log(this.entranceData)
            },

            handleAssociationTransfer(i) {
                this.index = i;
                this.plate_no = this.tableData[i].plateNo;
                this.cardate.entranceId = this.tableData[i].entranceId;
                let param = {
                    pageSize: this.tableData[i].pageSize,
                    CurrentPage: this.queryParams1.CurrentPage
                };
                GetTransferEntrance(param).then(res => {
                    // debugger
                    this.tableData1 = res.res.GetTransferEntrance;
                    let len = res.res.GetTransferEntrance.length;

                    if (len > 0) {
                        this.totalCount1 = this.tableData1[0].totalCount;
                        this.AssociationVisible = true;
                    }
                    else {
                        this.$message({
                            message: '没有转运车数据',
                            type: 'warning'
                        });

                    }
                }).catch(err => {
                    this.AssociationVisible = false;
                    this.isLoading = false;
                    console.log(err);
                });

            },

            handleView(row) {
                // this.$refs['weight-information'].show();
                // debugger
                this.cardate.entranceId1 = row.entranceId;
                console.log("查看cardate");
                console.log(this.cardate);
                AssociatedVehicle(this.cardate).then(res => {
                    if (res.status == '0' || res.res.AssociatedVehicle == 'Success' || res.res.AssociatedVehicle[0].Column1 == '关联成功') {
                        this.$message({
                            message: '关联成功',
                            type: 'success'
                        });
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            loadRemoteData() {
                this.isLoading = true;

                let params = {...this.queryParams};
                GetEntrance(params).then(res => {
                    this.isLoading = false;
                    this.tableData = res.res.GetEntrance;
                    this.information = res.res.GetEntrance;
                    this.totalCount = this.tableData[0].totalCount;
                    // this.showtable1 = true;
                    // debugger
                    this.tableSize = this.tableData.length;
                }).catch(err => {
                    this.tableData = [];
                    this.isLoading = false;
                    console.log(err);
                });
            }
            // handleView(item) {
            //     this.detailData = item;
            //     this.$refs['vehicle-detail'].show();
            // },

        }
    };
</script>

<style lang="scss" scoped>

    .table-header {
        background-color: #f8f8f8 !important;
    }
    .el-table ::v-deep td {
        padding: 5px 0 !important;
    }
    .tree-panel {
        margin-left: var(--real-sidebar-width);
        height: calc(100% - 120px);
        position: fixed;
        z-index: 100;
        left: 0;
        width: 260px;
        padding-left: 5px;
        padding-top: 5px;
        background: #fbfbfb;
        border: 1px solid #e5e5e5;
        margin-right: 10px;
    }
</style>
